/**
 * 字体图标及图片类组件展示页面
 * @author SPY
 * @description 用于显示文件对应格式的线上图标,网址:https://www.iconfont.cn/
 * @date 2019/11/21
 */

import React from 'react';
import { Card, Row, Col, Alert, Input } from 'antd';
import debounce from 'lodash/debounce';
import FileIconType from './components/IconComponent/FileIconType';

const hasFileType = ['doc', 'docx', 'fla', 'gif', 'jpg', 'mkv', 'mov', 'mp3', 'mp4', 'mpg', 'pdf', 'png',
    'ppt', 'pptx', 'svg', 'txt', 'wav', 'wma', 'wmv', 'xls', 'xlsx'];


class IconPicturePage extends React.Component {

    state = {
        fileType: 'weizhi',
    }

    constructor(props) {
        super(props);
        this.handleInputValue = debounce(this.handleInputValue, 500);
    }

    // 实时搜索
    handleInputValue = (value) => {
        console.log(value);
        this.setState({ fileType: value.toLowerCase() });
    }


    render() {

        const { fileType } = this.state;

        return (
            <Card>
                <Row gutter={24}>
                    <Col span={24}>
                        <Card
                            type='inner'
                            title={<a href='https://www.iconfont.cn/' target='_blank'>阿里图标库</a>}
                            style={{ borderTop: '1px solid #e8e8e8', marginTop: '2%', textAlign: 'center' }}
                            size='small'
                        >
                            <Alert message={`目前支持演示的文件类型:${hasFileType.join(', ')}`} type='warning' />
                            <div style={{ marginTop: '2%', marginBottom: '2%' }}></div>

                            <FileIconType height={50} width={50} fileType={fileType} />

                            <p style={{ marginTop: '2%' }}>
                                <Input
                                    placeholder='实时搜索文件类型 例: txt'
                                    style={{ width: 300 }}
                                    onChange={(e) => this.handleInputValue(e.target.value)}
                                />
                            </p>
                        </Card>
                    </Col>

                </Row>
            </Card>
        );
    }
}

export default IconPicturePage;